<template>
  <div>
    <div class="tishiTextsty">来自模型分析得出，还未参与计算</div>
    <div
      class="pingding"
      ref="pingdingaa"
      style="height: 1300px; width: 100%; overflow: scroll"
    ></div>
  </div>
</template>

<script>
// 评定详情
export default {
  data() {
    return {};
  },
  props: {},
  components: {},
  mounted() {},
  watch: {},
  methods: {
    //   桑基图
    sangji() {
      let myChart = this.$echarts.init(this.$refs.pingdingaa);
      let objList = [
        {
          text: "综合评定结果",
          num: "90分",
          ratio: "0.2",
          children: [
            {
              text: "训练计划制定",
              num: "90分",
              ratio: "0.2",
              children: [
                {
                  text: "专项训练计划制定",
                  num: "95分",
                  ratio: "0.2",
                },
                {
                  text: "月训练计划制定",
                  num: "95分",
                  ratio: "0.2",
                },
              ],
            },
            {
              text: "训练计划落实",
              num: "90分",
              ratio: "0.2",
              children: [
                {
                  text: "人员落实",
                  num: "95分",
                  ratio: "0.2",
                  type: 2,
                },
                {
                  text: "时间落实",
                  num: "95分",
                  ratio: "0.2",
                },
              ],
            },
            {
              text: "训练考核",
              num: "90分",
              ratio: "0.2",
              children: [
                {
                  text: "单个人员训练",
                  num: "95分",
                  ratio: "0.2",
                },
                {
                  text: "整体训练",
                  num: "95分",
                  ratio: "0.2",
                },
                {
                  text: "考核周期",
                  num: "95分",
                  ratio: "0.2",
                },
              ],
            },
            {
              text: "训练条件建设",
              num: "90分",
              ratio: "0.2",
              children: [
                {
                  text: "训练场地",
                  num: "95分",
                  ratio: "0.2",
                },
                {
                  text: "训练装备",
                  num: "95分",
                  ratio: "0.2",
                },
              ],
            },
            {
              text: "人员素质",
              num: "90分",
              ratio: "0.2",
              children: [
                {
                  text: "教练员适岗率",
                  num: "95分",
                  ratio: "0.2",
                },
                {
                  text: "学员素质",
                  num: "95分",
                  ratio: "0.2",
                },
              ],
            },
            {
              text: "训练监察奖惩",
              num: "95分",
              ratio: "0.2",
              children: [],
            },
          ],
        },
      ];
      let rich = {
        first: {
          backgroundColor: "#078E34",
          color: "#fff",
          align: "center",
          width: 135,
          height: 30,
          borderRadius: [5, 5, 0, 0],
        },
        second: {
          color: "#078E34",
          align: "center",
          lineHeight: 17,
        },
      };
      let richTwo = {
        first: {
          backgroundColor: "#3AC082",
          color: "#fff",
          align: "center",
          width: 135,
          height: 30,
          borderRadius: [5, 5, 0, 0],
        },
        second: {
          color: "#3AC082",
          align: "center",
          lineHeight: 17,
        },
      };
      let richThree = {
        first: {
          backgroundColor: "pink",
          color: "#fff",
          align: "center",
          width: 135,
          height: 30,
          borderRadius: [5, 5, 0, 0],
        },
        second: {
          color: "#3AC082",
          align: "center",
          lineHeight: 17,
        },
      };
      for (var i = 0; i < objList.length; i++) {
        let obj = {
          name: objList[i].text,
          label: {
            backgroundColor: "#078e3433",
            formatter: [
              "{first|" + objList[i].text +"}",
              "{second|" + objList[i].num + "}",
            ].join("\n"),
            rich: rich,
          },
          children: objList[i].children,
        };
        for (var q = 0; q < obj.children.length; q++) {
          let objTwo = {
            name: obj.children[q].text,
            label: {
              backgroundColor: "#3ac08233",
              formatter: [
                "{first|" +
                  obj.children[q].text +
                  ":" +
                  obj.children[q].ratio +
                  "}",
                "{second|" + obj.children[q].num + "}",
              ].join("\n"),
              rich: richTwo,
            },
            children: objList[i].children[q].children,
          };
          for (var w = 0; w < objTwo.children.length; w++) {
            let objThree = {
              name: objTwo.children[w].text,
              label: {
                backgroundColor: "#3ac08233",
                formatter: [
                  "{first|" +
                    objTwo.children[w].text +
                    ":" +
                    objTwo.children[w].ratio +
                    "}",
                  "{second|" + objTwo.children[w].num + "}",
                ].join("\n"),
                rich: objTwo.children[w].type == 2 ? richThree : richTwo,
              },
            };
            objTwo.children[w] = objThree;
          }
          objList[i].children[q] = objTwo;
        }
        objList[i] = obj;
      }
      myChart.setOption({
        series: [
          {
            type: "tree",
            orient: "horizontal", //竖向或水平   TB代表竖向  LR代表水平
            edgeShape: "curve", //控制折线的形式
            top: "0%",
            expandAndCollapse: true, //点击节点时不收起子节点，default: true
            symbol: "emptyCircle",
            itemStyle: {
              color: "transparent",
              borderWidth: 0,
            },
            lineStyle: {
              color: "#D5D5D5",
              width: 1,
              // curveness: 0.7,
            },
            data: objList,
          },
        ],
      });
      window.onresize = myChart.resize;
    },
  },
};
</script>

<style  scoped>
.tishiTextsty {
  margin-left: 48px;
  margin-top: 24px;
  font-size: 14px;
  background: pink;
  display: inline-block;
  padding: 4px 8px;
  color: #fff;
}
</style>

